<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="上传" prop="upload" required>
        <el-upload
          ref="upload"
          :limit="1"
          :file-list="uploadfileList"
          name="excelFile"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
        >
          <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传不超过 1GB 的文件</div>
        </el-upload>
      </el-form-item>
        <el-form-item size="large">
        <el-button type="primary" @click="submitUpload">确 定</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
import {getToken} from "@/utils/auth";

export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        uploadFile: null,
        upload: null,
      },
      upload: {
        // 是否显示弹出层（用户导入）
        open: true,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/excel/readExcelFile"
      },
      rules: {},
      uploadAction: '',
      uploadfileList: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {

    resetForm() {
      this.uploadfileList = [];
      this.$refs['elForm'].resetFields();
    },
    uploadBeforeUpload(file) {
      console.log("uploadBeforeUpload");
      let isRightSize = file.size / 1024 / 1024 / 1024 < 1
      if (!isRightSize) {
        this.$message.error('文件大小超过 1GB')
      }
      return isRightSize
    },
    submitUpload() {
      this.$refs['upload'].submit()
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      // this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
